<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
body{
    margin: 50px;
}
.content{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    border: 3px solid #eee;
    color: #999;
    padding: 50px;
    gap: 50px;
    flex: 1;
    margin: 20px 0;
}
.content:empty::after{
    content: '不允许放置';
}
[allowdrop]:empty::after{
    content: '拖放此处';
}
[allowdrop][over]:empty::after{
    content: '松开放置';
}
[allowdrop][over]{
    outline: 4px solid slateblue;
    outline-offset: -3px;
}
[allowdrop][over]>*:not([allowdrop]){
    pointer-events: none;
}
    </style>
</head>
<body>
    <img  width="100" height="100" src="https://tva1.sinaimg.cn/large/008i3skNgy1grgo8qjty1j30e80e8aad.jpg">
    <div class="content" allowdrop></div>
    <img  width="100" height="100" src="https://tva1.sinaimg.cn/large/008i3skNgy1grgo8qjty1j30e80e8aad.jpg">
    <div class="content" allowdrop>
        <div class="content" allowdrop></div>
        <div class="content"></div>
        <div class="content" allowdrop></div>
    </div>
    <script>

        function drop(ev){

        }

document.addEventListener('dragover', function(ev){
    const dropbox = ev.target.closest('[allowdrop]');
    if (dropbox) {
        ev.preventDefault()
    }
})

document.addEventListener('drop', function(ev){
    ev.target.toggleAttribute('over',false);
})

document.addEventListener('dragleave', function(ev) {
    if (ev.target.getAttribute('allowdrop')!==null) {
        ev.target.toggleAttribute('over',false);
    }
})
document.addEventListener('dragenter', function(ev) {
    if (ev.target.getAttribute('allowdrop')!==null) {
        ev.target.toggleAttribute('over',true);
    }
})

        // let lastDrop = null;
        // document.addEventListener('dragenter', function(ev) {
        //     console.log('dragenter', ev.target)
        //     if (lastDrop) {
        //         lastDrop.toggleAttribute('over',false);
        //     }
        //     const dropbox = ev.target.closest('[allowdrop]');
        //     if (dropbox) {
        //         dropbox.toggleAttribute('over',true);
        //         lastDrop = dropbox;
        //     }
        // })
    </script>
</body>
</html>